<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" style="margin: 20px 60px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">

        <div v-for="(item, index) in form">
            <el-form-item :label=" '属性名' + (index + 1) ">
                <el-input v-model="item.attr_name" placeholder="请输入属性名"></el-input>
            </el-form-item>
            <el-form-item :label=" '属性值' + (index + 1) ">
                <el-input v-model="item.attr_value" placeholder="请输入属性值"></el-input>
            </el-form-item>
            <el-button type="danger" @click="removeFormItem(index)">移除</el-button>
        </div>
        <div>
            <div>
                <el-form-item>
                    <el-button type="default" @click="addFormItem">增加表单项</el-button>
                </el-form-item>
            </div>
            <div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">保存</el-button>
                </el-form-item>
            </div>
        </div>
    </el-form>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    v = new Vue({
        el: "#app",
        data: {
            //商品id
            spu_id: "{$spu_id}",
            //属性下拉框的选项
            //表单项
            form: [
                {attr_name: '',attr_value: ''},
            ]
        },
        methods: {
            //增加表单项
            addFormItem(){
                this.form.push(
                    {attr_name: '',attr_value: ''},
                    )
            },
            //移除表单项
            removeFormItem(index){
                this.form.splice(index, 1)
            },
            //提交表单
            submitForm(){
                //     console.log(this.form)
                // }
                $.ajax({
                    url: "{:url('Spu/setGoodsAttrsPost')}",
                    type: "POST",
                    data: {
                        spu_id : this.spu_id,
                        form: this.form,
                    },
                    success(res){
                        alert('保存成功')
                    },
                    error(){
                        alert('请求失败')
                    }
                })
            }
        },
        created(){
            // // //页面打开后，请求属性下拉选项
            // $.ajax({
            //     url: "{:url('Spu/getGoodsAttr2')}",
            //     data: {
            //         spu_id: this.spu_id,
            //     },
            //     success(res){
            //         v.form = res.data
            //     },
            //     error(){
            //         alert('请求失败')
            //     }
            // })
        }
    })
</script>
</body>
</html>